{% init xnote_form_var = "form" %}
{% set _xnote_form = globals()[xnote_form_var] %}

<style>
    .form-row {
        margin-bottom: 10px;
    }
    .form-row label {
        width: 100px;
        display: block;
        float: left;
    }
    .form-row textarea {
        width: 300px;
        height: 50px;
    }
    .form-body {
        position: absolute;
        padding: 10px;
        top: 0px;
        bottom: 50px;
        overflow-y: auto;
        right: 0px;
        left: 0px;
    }
    .form-footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 50px;
        padding: 10px;
    }
</style>

<div class="form-body">
    <form id="xnoteForm{{_xnote_form.id}}">
        {% for row in _xnote_form.rows %}
            <div class="form-row {{row.css_class}}">
                <label>{{row.title}}</label>
                {% if row.type == "input" %}
                    <input type="text" name="{{row.field}}" placeholder="{{row.placeholder}}" value="{{row.value}}" {{row.get_readonly_attr()}}>
                {% end %}
                {% if row.type == "textarea" %}
                    <textarea name="{{row.field}}" placeholder="{{row.placeholder}}">{{row.value}}</textarea>
                {% end %}
                {% if row.type == "select" %}
                    <select name="{{row.field}}" value="{{row.value}}">
                        {% for option in row.options %}
                            <option value="{{option.value}}">{{option.title}}</option>
                        {% end %}
                    </select>
                {% end %}
                {% if row.type == "date" %}
                    <input id="{{row.id}}" name="{{row.field}}" class="form-date" data-date-type="{{row.date_type}}" 
                        placeholder="{{row.placeholder}}" value="{{row.value}}" autocomplete="off">
                {% end %}
            </div>
        {% end %}
    </form>
</div>

<div class="form-footer">
    <div class="float-right">
        <button class="large" onclick="xnote.handleFormSubmit(this)" data-form-id="xnoteForm{{_xnote_form.id}}">保存</button>
        <button class="large btn-default" onclick="xnote.dialog.closeLast(this)" data-form-id="xnoteForm{{_xnote_form.id}}">关闭</button>
    </div>
</div>

<script>
    // 刷新默认值
    xnote.refresh();
    xnote.handleFormSubmit = function(target) {
        var request = {};
        var formId = $(target).attr("data-form-id");
        var data = $("#"+formId).formData();
        request.data = JSON.stringify(data);
        console.log("request:", request);
    
        xnote.http.post("?model={{_xnote_form.model_name}}&action={{_xnote_form.save_action}}", request, function (resp) {
            if (resp.success) {
                xnote.toast("保存成功");
                window.parent.location.reload();
                // xnote.closeDialog("last");
            } else {
                xnote.toast(resp.message);
            }
        });
    }

    $(".form-date").click(function(event) {
        var elem = event.target;
        if ($(elem).attr("data-laydate-bind")) {
            return;
        }

        laydate.render({
            elem: elem,
            type: $(elem).attr("data-date-type"),
            show: true
        });
        
        $(elem).attr("data-laydate-bind", true);
    });
</script>